<!--
 * @Author: your name
 * @Date: 2021-05-25 15:07:34
 * @LastEditTime: 2021-05-28 10:46:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\overview\flow-image.vue
-->
<template>
    <div class="flow-image-mian-box">
        <div class="pv-box img-box">
            <img src="../../assets/img/site/1.png" alt="">
            <span class="img-icon-text">{{pvData.pvPowerTotal | chargFilter('value')}} {{pvData.pvPowerTotal | chargFilter('lable')}}</span>
            <div class="pv-hover float-msg-box" v-if='Object.keys(pvData.pvs).length>0'>
                <div v-for='(value,key,index) of pvData.pvs' :key='key'>
                    <p>{{key}} <span class="pv-span-icon" :class="'status' + (value.inverterStatus||3)"></span> </p>
                    <p>{{$t('index.solarPower')}}： {{value.power | chargFilter('value')}} {{value.power | chargFilter('lable')}}</p>
                    <el-divider v-if='index+1 != Object.keys(pvData.pvs).length'></el-divider>
                </div>
            </div>
        </div>
        <div class="ling-flow pv-line" :class='pvData.pvPowerTotal>0?"":pvData.pvPowerTotal<0?"pv-line-sub":"no-background"'>
            <div>
            </div>
        </div>
        <div class="inverter-box img-box">
            <img src="../../assets/img/site/3.png" alt="">
            <span class="img-icon-text">{{inverterData.totalPower | chargFilter('value')}} {{inverterData.totalPower | chargFilter('lable')}}</span>
            <div class="inverter-hover float-msg-box" v-if='inverterData.list.length>0'>
                <div v-for='(item,index) of inverterData.list' :key='item.sn'>
                    <p>{{item.sn}} <span class="pv-span-icon" :class="'status' + (item.status||3)"></span></p>
                    <p>{{$t('load.ACPower')}}： {{item.power | chargFilter('value')}} {{item.power | chargFilter('lable')}}</p>
                    <el-divider v-if='index+1 != inverterData.list.length'></el-divider>
                </div>
            </div>
        </div>
        <!-- :class='' -->
        <div class="ling-flow inverter-line" :class='returnInverterLine()'>
            <div>
            </div>
        </div>
        <div class="sys-box img-box">
            <img src="../../assets/img/site/4.png" alt="">
            <span class="img-icon-text">{{inverterData.feedInPower | chargFilter('value')}} {{inverterData.feedInPower | chargFilter('lable')}}</span>
        </div>
        <div class="battery-box img-box" v-if='batteryData.totalPower !==0'>
            <img src="../../assets/img/site/2.png" alt="">
            <span class="img-icon-text">{{batteryData.totalPower | chargFilter('value')}} {{batteryData.totalPower | chargFilter('lable')}}</span>
            <span class="img-icon-text" style="top:20px;">{{batteryData.avgSoc | floatNum}}%</span>
            <div class="battery-hover float-msg-box" v-if='Object.keys(batteryData.inverters).length>0'>
                <div v-for='(value,key,index) of batteryData.inverters' :key='key'>
                    <p>{{key}} <span class="pv-span-icon" :class="'status' + (value.inverterState||3)"></span></p>
                    <p>{{$t('index.batteryPower')}}: {{value.batteryPower | chargFilter('value')}} {{value.batteryPower | chargFilter('lable')}}</p>
                    <p>
                        SOC：{{value.batteryCapacity}}% 
                        <i v-if="value.batteryPower>0" class="charge-status"></i>
                        <i v-if="value.batteryPower<0" class="charge-status discharge"></i>
                    </p>
                    <el-divider v-if='index+1 != Object.keys(batteryData.inverters).length'></el-divider>
                </div>
            </div>
        </div>
        <div class="ling-flow battery-line" :class='batteryData.totalPower>0?"":batteryData.totalPower<0?"battery-line-sub":"no-background"' v-if='batteryData.totalPower !==0'>
            <div>
            </div>
        </div>
        <div class="home-box img-box">
            <img src="../../assets/img/site/5.png" alt="">
            <span class="img-icon-text">{{(inverterData.totalPower-inverterData.feedInPower-chargeData.totalPower) | chargFilter('value')}} {{(inverterData.totalPower-inverterData.feedInPower-chargeData.totalPower) | chargFilter('lable')}}</span>
        </div>
        <div class="ling-flow home-line" :class="returnHomeLine()">
            <div>
            </div>
        </div>
        <div class="ling-flow home2-line" :class='loadLingStatus.home'>
            <div>
            </div>
        </div>
        <div class="charg-box img-box" v-if='chargShow'>
            <i class="iconfont icon-chongdianzhuang"></i>
            <span class="img-icon-text" style='top:27px;'>{{chargeData.totalPower | chargFilter('value')}} {{chargeData.totalPower | chargFilter('lable')}}</span>
            <div class="charg-hover float-msg-box" v-if='chargeData.list.length>0'>
                <div v-for='(item,index) of chargeData.list' :key='item.sn'>
                    <p>{{item.sn}}</p>
                    <p >{{$t('charg.Connect.Status')}}： <span :style='returnColor(item.status)'>{{item.statusStr}}</span></p>
                    <p>{{$t('charg.Charging.Power')}}：{{item.power | chargFilter('value')}} {{item.power | chargFilter('lable')}}</p>
                    <p>{{$t('charg.Charging.e')}}： {{item.yield | chargFilter('value')}} {{item.yield | chargFilter('e')}}</p>
                    <el-divider v-if='index+1 != chargeData.list.length'></el-divider>
                </div>
            </div>
        </div>
        <div class="ling-flow charg-line " :class='loadLingStatus.charg' v-if='chargShow'>
            <div>
            </div>
        </div>
        <div class="ling-flow charg2-line" :class='returnCharg2()' v-if='chargShow'>
            <div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        components: {

        },
        props: {

        },
        data() {
            return {
                chargShow:'',
                inverterData:{list:[]},
                chargeData:{list:[]},
                pvData:{pvs:{}},
                batteryData:{inverters:{}},
            };
        },
        computed: {
            siteId(){
                return this.$route.query.siteId
            },
            loadLingStatus(){
                // 2、3、4同正——之间无流动
                // 2、3、4同负——之间无流动
                // 2、3、4同0——之间无流动
                // 2、3、4中有两个为0——之间无流动
                // 2、3、4中的一个为0——剩余两个按照同正同负不流动、负流向正的规律
                // 2、3、4中只有一个为负——两短都离开负的方向流动
                // 2、3、4中只有一个为正——两短都向着正的方向流动
                let obj={
                    charg:'',
                    home:'',
                }
                let two = this.inverterData.feedInPower || 0
                let three = this.inverterData.totalPower-this.inverterData.feedInPower-this.chargeData.totalPower || 0
                let four = this.chargeData.totalPower || 0
                if(two>0&&three<0&&four<0){
                    obj={
                        charg:'charg-line-sub',
                        home:'home2-line-sub',
                    }
                }else if(two<0&&three>0&&four<0){
                    obj={
                        charg:'charg-line-sub',
                        home:'home2-line',
                    }
                }else if(two<0&&three<0&&four>0){
                    obj={
                        charg:'charg-line',
                        home:'home2-line',
                    }
                }else if(two<0&&three>0&&four>0){
                    obj={
                        charg:'charg-line',
                        home:'home2-line',
                    }
                }else if(two>0&&three<0&&four>0){
                    obj={
                        charg:'charg-line',
                        home:'home2-line-sub',
                    }
                }else if(two>0&&three>0&&four<0){
                    obj={
                        charg:'charg-line-sub',
                        home:'home2-line-sub',
                    }
                }else if(two==0&&three>0&&four<0){
                    obj={
                        charg:'charg-line-sub',
                        home:'no-background',
                    }
                }else if(two==0&&three<0&&four>0){
                    obj={
                        charg:'charg-line',
                        home:'no-background',
                    }
                }else if(two<0&&three==0&&four>0){
                    obj={
                        charg:'charg-line',
                        home:'home2-line',
                    }
                }else if(two>0&&three==0&&four<0){
                    obj={
                        charg:'charg-line-sub',
                        home:'home2-line-sub',
                    }
                }else if(two>0&&three<0&&four==0){
                    obj={
                        charg:'no-background',
                        home:'home2-line-sub',
                    }
                }else if(two<0&&three>0&&four==0){
                    obj={
                        charg:'no-background',
                        home:'home2-line',
                    }
                }else{
                    obj={
                        charg:'no-background',
                        home:'no-background',
                    }
                }
                return obj
            }
        },
        watch: {

        },
        created() {

        },
        mounted() {
            this.devchargepileExistPile()
            this.devchargepileGetSiteInverter()
            this.devchargepileGetSiteCharge()
            this.siteIndexGetSitePvs()
            this.siteIndexGetSiteBatterys()
        },
        methods: {
            returnHome2Line(){
                // 电网负载同正——无流动
                // 电网负载同负——无流动
                // 正负不同——按照负→正流动
                // 任一为0——无流动
                let load = this.inverterData.totalPower-this.inverterData.feedInPower-this.chargeData.totalPower
                if(this.inverterData.feedInPower< 0 && load > 0){
                    return ''
                }else if(this.inverterData.feedInPower> 0 && load < 0){
                    return 'home2-line-sub'
                }else{
                    return 'no-background' 
                }
            },
            returnHomeLine(){
                // 逆变器负载同正——向负载流动
                // 逆变器负载同负——向逆变器流动
                // 正负不同——无流动
                // 任一为0——无流动
                let load = this.inverterData.totalPower-this.inverterData.feedInPower-this.chargeData.totalPower
                if(this.inverterData.totalPower>0 && load >0){
                    return ''
                }else if(this.inverterData.totalPower<0 && load <0){
                    return 'home-line-sub'
                }else{
                    return 'no-background'
                }
            },
            returnInverterLine(){
                // 逆变器电网同正——向电网流动
                // 逆变器电网同负——向逆变器流动
                // 正负不同——无流动
                // 任一为0——无流动
                if(this.inverterData.totalPower>0&&this.inverterData.feedInPower>0){
                    return ''
                }else if(this.inverterData.totalPower<0&&this.inverterData.feedInPower<0){
                    return 'inverter-line-sub'
                }else{
                    return 'no-background'
                }
            },
            returnCharg(){
                if(this.chargeData.totalPower<this.inverterData.totalPower){
                    return ''
                }else if(this.chargeData.totalPower>this.inverterData.totalPower && this.inverterData.totalPower !=0){
                    return ''
                }else{
                    return 'no-background'
                }
            },
            returnCharg2(){
                if(this.chargeData.totalPower>0 && this.inverterData.totalPower >0){
                    return ''
                }else if(this.chargeData.totalPower<0 && this.inverterData.totalPower <0){
                    return 'charg2-line-sub'
                }else{
                    return 'no-background'
                }
            },
            async devchargepileExistPile(){
                let res = await this.API.devchargepileExistPile({
                    siteId:this.siteId
                })
                this.chargShow = res
            },
            async devchargepileGetSiteInverter(){
                let res = await this.API.devchargepileGetSiteInverter({
                    siteId:this.siteId
                })
                this.inverterData = res
            },
            async devchargepileGetSiteCharge(){
                let res = await this.API.devchargepileGetSiteCharge({
                    siteId:this.siteId
                })
                this.chargeData = res
                
            },
            async siteIndexGetSitePvs(){
                let res = await this.API.siteIndexGetSitePvs({
                    siteId:this.siteId
                })
                this.pvData = res
            },
            async siteIndexGetSiteBatterys(){
                let res = await this.API.siteIndexGetSiteBatterys({
                    siteId:this.siteId
                })
                console.log(this.batteryData,'this.batteryData---')
                this.batteryData = res
            },
            returnColor(status){
                if(status == 100){
                    return 'color:#ccc;'
                }
                if(status == 0){
                    return 'color:#ccc;'
                }
                if(status == 1){
                    return 'color:skyblue;'
                }
                if(status == 2){
                    return 'color:green;'
                }
                if(status == 3){
                    return 'color:red;'
                }
                if(status == 4){
                    return 'color:red;'
                }
                if(status == 5){
                    return 'color:orange;'
                }

            },
            returnStatus(status){
                if(status == 100){
                    return '-'
                }
                if(status == 0){
                    return this.$t('charg.status.1')
                }
                if(status == 1){
                    return this.$t('charg.status.2')
                }
                if(status == 2){
                    return this.$t('charg.status.3')
                }
                if(status == 3){
                    return this.$t('charg.status.4')
                }
                if(status == 4){
                    return this.$t('alarmLevelAnalysis.js_fault')
                }
                if(status == 5){
                    return this.$t('m_511078469627543552')
                }

            },
        },
    };
</script>

<style lang="less" >
    .el-divider--horizontal{
        margin: 15px auto;
    }
    .flow-image-mian-box{
        position: relative;
        width: 600px;
        height: 328px;
        margin: 0 auto;
        .img-box{
            img{
                width: 80px;
            }
        }
        .ling-flow {
            position: absolute;
            width: 100px;
            height: 13px;
            border-radius: 8px;
            background-color: #D6D6D6;
            div {
                width: 100%;
                height: 13px;
                background: url(../../assets/img/realtime/move3.gif) no-repeat;
                background-size: auto 100%;
                background-position-x: 10px;
            }
        }
        .pv-box{
            position: absolute;
            top: 20px;
            left: 50px;
        }
        .pv-box:hover{
            .pv-hover{
                display: block;
            }
        }
        .inverter-box{
            position: absolute;
            top: 20px;
            left: 270px;
        }
        .inverter-box:hover{
            .inverter-hover{
                display: block;
            }
        }
        .sys-box{
            position: absolute;
            top: 20px;
            left: 490px;
        }
        .battery-box{
            position: absolute;
            top: 163px;
            left: 112px;
        }
        .battery-box:hover{
            .battery-hover{
                display: block;
            }
        }
        .home-box{
            position: absolute;
            top: 163px;
            left: 421px;
        }
        .charg-box{
            position: absolute;
            top: 227px;
            left: 270px;
            text-align: center;
            width: 80px;
            height: 80px;
            border: 3px solid #0e9a0eab;
            border-radius: 50%;
            box-sizing: border-box;
            box-shadow: 0px 0px 5px 0px #0e9a0eab;
            line-height: 64px;
            background-color: #EEEFFC;
            i{
                font-size: 34px;
                color: #888383cf;
            }
        }
        .charg-box:hover{
            .charg-hover{
                display: block;
                line-height: 8px;
                text-align: left;
            }
        }
        .no-background{
            div{
                background: none !important;
            }
        }
        .pv-line{
            position: absolute;
            top: 50px;
            left: 150px;
        }
        .pv-line-sub{
            transform: rotate(-180deg) !important;
        }
        
        .inverter-line{
            top: 50px;
            left: 370px;
        }
        .inverter-line-sub{
            transform: rotate(-180deg) !important;
        }
        .battery-line{
            top: 132px;
            left: 189px;
            width: 100px;
            transform: rotate(135deg);
        }
        .battery-line-sub{
            transform: rotate(-45deg) !important;
        }
        .home-line{
            top: 132px;
            left: 329px;
            width: 100px;
            transform: rotate(45deg);
        }
        .home-line-sub{
            transform: rotate(225deg) !important;
        }
        .home2-line{
            top: 127px;
            left: 472px;
            width: 50px;
            transform: rotate(119deg);
        }
        .home2-line-sub{
            transform: rotate(-61deg) !important;
        }
        .charg-line{
            top: 239px;
            left: 366px;
            width: 50px;
            transform: rotate(149deg);
        }
        .charg-line-sub{
            transform: rotate(-31deg) !important;
        }
        .charg2-line{
            top: 156px;
            left: 259px;
            width: 100px;
            transform: rotate(90deg);
        }
        .charg2-line-sub{
            transform: rotate(-90deg) !important;
        }
        .pv-hover{
            top: 10px;
            left: -130px;
            display: none;
        }
        .battery-hover{
            top: 10px;
            left: -130px;
            display: none;
        }
        .inverter-hover{
            top: 10px;
            left: -130px;
            display: none;
        }
        .charg-hover{
            top: 10px;
            left: -130px;
            display: none;
        }
        .float-msg-box{
            position: absolute;
            background: rgba(240,240,250,.9);
            font-size: 13px;
            border: 1px solid #e0e0e0;
            border-radius: 3px;
            box-shadow: 3px 3px 5px rgba(0,0,0,.2);
            z-index: 4;
            padding: 10px;
            line-height: 8px;
        }
        .pv-span-icon{
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #00bb65;
            margin-left: 5px;
        }
        .status1::before{
            background: #7bc594;
        }
        .status4::before{
            background: #fdd001;
        }
        .status2::before{
            background: #ef708b;
        }
        .status3::before{
            background: #bdbdbd;
        }
        .img-icon-text{
            position: absolute;
            font-size: 8px;
            color:#fc8920;
            top: 52px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            display: inline-block;
            text-align: center;
            word-break:keep-all;
            white-space:nowrap; 
        }

    }
</style>